import { createSlice } from "@reduxjs/toolkit";
import DashBoard from "@p/DashBoard";
import ItemAdd from "@p/ItemAdd";
import ItemLists from "@p/ItemLists";
import ItemUpdate from "@p/ItemUpdate";
import UserInfo from "@p/UserInfo";
import SettingPage from "@p/SettingPage"
import CateLists from "@p/CateLists";
import {
  PieChartOutlined,
  DashboardOutlined,
  UserOutlined,
  SettingOutlined,
} from '@ant-design/icons';
const userSlice = createSlice({
  name: 'user',
  initialState: {
    userInfo: localStorage.getItem('userInfo')
      ?
      JSON.parse(localStorage.getItem('userInfo'))
      :
      {}
    ,
    token: localStorage.getItem('token') || '',
    role: localStorage.getItem('role') || '',
    //侧边导航的数据
    meuItemType: [
      {
        key: '/dashBoard',
        icon: <DashboardOutlined />,
        label: '仪表盘',
        title: '仪表盘',
        role: '*'
      },
      {
        key: 'items',
        icon: <PieChartOutlined />,
        label: '商品管理',
        title: '商品管理',
        role: ['a', 'b', 'admin'],
        children: [
          {
            key: '/itemLists',
            title: '商品列表',
            role: ['a', 'b', 'admin'],
            label: '商品列表',
          },
          {
            key: '/cateLists',
            title: '商品分类',
            role: ['a', 'b', 'admin'],
            label: '商品分类',
          }
        ]
      },
      {
        key: '/userInfo',
        label: '个人中心',
        role: ['a', 'b', 'admin'],
        title: '个人中心',
        icon: <UserOutlined />
      },
      {
        key: '/setting',
        label: '设置',
        role: ['a', 'b'],
        title: '设置',
        icon: <SettingOutlined />
      }
    ],
    //侧边导航的数据

    //二级菜单的路由
    autoRoutes: [
      {
        path: '/dashBoard',
        name: '仪表盘',
        element: DashBoard,
        role: '*'
      },
      {
        path: '/itemLists',
        name: '商品管理',
        element: ItemLists,
        role: ['a', 'b', 'admin']
      },
      {
        path: '/CateLists',
        name: '商品分类管理',
        element: CateLists,
        role: ['a', 'b', 'admin']
      },
      {
        path: '/itemAdd',
        name: '添加商品',
        role: ['a', 'b', 'admin'],
        element: ItemAdd
      },
      {
        path: '/itemUpdate',
        name: '修改商品',
        role: ['a', 'b', 'admin'],
        element: ItemUpdate
      },
      {
        path: '/userInfo',
        name: '个人中心',
        role: ['a', 'b', 'admin'],
        element: UserInfo
      },
      {
        path: '/setting',
        name: '设置',
        role: ['a', 'b'],
        element: SettingPage
      }
    ]
    //二级菜单的路由
  },
  reducers: {
    initLogin(state, active) {
      const { userInfo, token, role } = active.payload
      state.userInfo = userInfo
      state.token = token
      state.role = role
    },
    shouldAutoApps(state) {
      //对侧边导航进行二次筛选
      
      const role =state.role
      let autoArr = []
      state.meuItemType.forEach(item => {
        if (item.role === '*' || item.role.includes(role) ){
          //判断有没有子菜单
          if(item.children){
            let childArr = []
            childArr=item.children.filter(el => (el.role === '*' || el.role.includes(role)) )
           item.children = childArr
          }

          autoArr.push(item)
        }
      })
      state.meuItemType = autoArr
  //对侧边导航进行二次筛选

  state .autoRoutes = state.autoRoutes.filter(item => item.role === '*' || item.role.includes(role) )
    } 
  }
})
export const { initLogin, shouldAutoApps } = userSlice.actions;
export default userSlice.reducer;